<script setup>
	const props = defineProps({
		info: {
			type: Object,
			default: {},
		},
	})
	console.log(props.info)
	const illnessTimes = {
		1: '一周内',
		2: '一月内',
		3: '半年内',
		4: '半年以上',
	}
	const consultFlags = { 1: '就诊过', 0: '没有就诊过' }
	function showPictures(urls) {
		uni.previewImage({
			urls: urls?.map(({ url }) => url),
		})
	}
</script>

<template>
	<view class="patient-info">
		<view class="patient-header">
			<view class="title">
				{{ props.info.patientInfo.name }}
				{{ props.info.patientInfo.genderValue }}
				{{ props.info.patientInfo.age }}岁
			</view>
			<view class="note">
				{{ illnessTimes[props.info.illnessTime] }} |
				{{ consultFlags[props.info.consultFlag] }}
			</view>
		</view>
		<view class="content">
			<view class="list-item">
				<text class="label">病情描述</text>
				<text class="note">头痛、头晕、恶心</text>
			</view>
			<view class="list-item">
				<text class="label">图片</text>
				<text
					class="note"
					v-if="props.info.pictures.length > 0"
					@click="showPictures(props.info.pictures)"
					>点击查看</text
				>
				<text class="note" v-else>暂无图片</text>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
	.patient-info {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx;

		.patient-header {
			padding-bottom: 20rpx;
			border-bottom: 1px solid #fbfbfb;
			.title {
				font-size: 32rpx;
				color: #121826;
				margin-bottom: 10rpx;
			}
			.note {
				font-size: 26rpx;
				color: #6f6f6f;
			}
		}
		.content {
			margin-top: 20rpx;
			font-size: 26rpx;
			.list-item {
				display: flex;
				margin-top: 10rpx;
				.label {
					width: 130rpx;
					color: #3c3e42;
				}
				.note {
					flex: 1;
					line-height: 1.4;
					color: #848484;
				}
			}
		}
	}
</style>
